<template>
   <div class="displayInfo">
      <div @click=" showPopup()">
         <dl>
            <dt><img src="https://file05.c.hihonor.com/pimages/attrPicture/96c3c938-1c44-48a5-8754-9f9b06b40986.png" alt=""></dt>
            <dd class="one">CPU</dd>
            <dd class="two">晓龙888</dd>
         </dl>
      </div>
      <div  @click=" showPopup()">
         <dl>
            <dt><img src="https://file05.c.hihonor.com/pimages/attrPicture/2578f194-ffc4-43f1-8527-acd0cdcd001d.png" alt=""></dt>
            <dd class="one">超级快充</dd>
            <dd class="two">66W</dd>
         </dl>
      </div>
      <div  @click=" showPopup()">
         <dl>
            <dt><img src="https://file05.c.hihonor.com/pimages/attrPicture/03a7f52f-0d5e-4c54-88c6-944ab844340d.png" alt=""></dt>
            <dd class="one">高刷电竞屏</dd>
            <dd class="two">144Hz</dd>
         </dl>
      </div>
      <div  @click=" showPopup()">
         <dl>
            <dt><img src="https://file05.c.hihonor.com/pimages/attrPicture/01024623-3d4f-4505-a8d9-ebacfdc9e23b.png" alt=""></dt>
            <dd class="one">电池容量</dd>
            <dd class="two">4800mAh</dd>
         </dl>
      </div>
      <div  @click=" showPopup()">
         <dl>
            <dt><img src="https://file05.c.hihonor.com/pimages/attrPicture/aa8e79d4-a805-4f38-8528-7b43460e2613.png" alt=""></dt>
            <dd class="one">运行内存</dd>
            <dd class="two">最高12GB</dd>
         </dl>
      </div>
      <van-cell is-link @click="showPopup"></van-cell>
      <van-popup 
      v-model="show" 
      position="bottom" 
      :style="{height:'70%'}"
      closeable 
      close-icon="close"
      close-icon-position="top-right"
      class="box">
      <div class="canshu">
         <p>关键参数</p>
         <div class="xia">
            <span class="one">CPU</span>
            <span>骁龙888</span>
         </div>
         <div class="xia">
            <span class="one">超级快充</span>
            <span>66W</span>
         </div>
         <div class="xia">
            <span class="one">高刷电竞屏</span>
            <span>144Hz</span>
         </div>
         <div class="xia">
            <span class="one">电池容量</span>
            <span>4800mAh</span>
         </div>
         <div class="xia">
            <span class="one">运行内存</span>
            <span>最高12GB</span>
         </div>
         <button>确定</button>
      </div>
      </van-popup>
   </div>
</template>

<script>
export default {
    data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
}
</script>

<style scoped>
   .displayInfo{
      width: 100%;
      display: flex;
      justify-content: space-between;
      overflow: auto;
      padding-top: 1.25rem;
      border-top: 1px solid rgb(238, 235, 235);
   }
   .displayInfo::-webkit-scrollbar{
      display: none;
   }
   dl {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 5.8275rem;
      height: 4.415rem;
   }
   dl dt img{
      width: .9756rem;
      height: .9756rem;
   }
   dl .one{
      width: 100%;
      font-size: .6rem;
      color: #333;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
   }
   dl .two{
      width: 100%;
      font-size: .5rem;
      color: #333;
      height: .81rem;
      line-height: .81rem;
      text-align: center;
   }
   .canshu{
      display: flex;
      flex-direction: column;
      padding: 1rem;
      position: relative;
   }
   .canshu p{
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: .825rem;
   }
   .canshu .xia{
      display: flex;
      height: 2.25rem;
      margin-top: .3125rem;
      font-size: .9rem;
      align-items: center;
   }
   .canshu .xia .one{
      font-size: .7rem;
      color: #6d6c6c;
      margin-right: 1.375rem;
   }
   .canshu button{
      position:absolute;
      bottom:-18.4rem;
      background-color: rgb(65, 65, 250);
      font-size: 1.2rem;
      text-align: center;
      height: 2.5rem;
      line-height: 2.5rem;
      display: block;
      width: 100%;
      margin-left: -1rem;
      border-radius: .5125rem;
   }
   .box{
      width: 100%;
   }
</style>